<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #div1{
        width: 400px;
        height:200px;
        background: red;
        color: #fff;
        text-align: center;
        line-height: 200px;
    }
    </style>

</head>
<body>
    <div id="div1">请把文件拖拽至此区域</div>
</body>
<script  >
    window.onload=function(){
  
    let odiv=document.getElementById('div1');//获取元素
        console.log(odiv)
        //ondragenter 进入
        //ondragleave 离开
        //ondragover 悬浮
        //ondrag 松开鼠标
        // odiv.ondragenter=function(){
        //     odiv.innerHTML='释放鼠标';
        // }
        // odiv.ondragleave=function(){
        //     odiv.innerHTML='请把文件拖拽至此区域';
        // }
        // odiv.ondragover=function(){
        //    console.log('ondragover')
        // }
        odiv.addEventListener('dragenter',function(){
            odiv.innerHTML='释放鼠标';
        },false)
        odiv.addEventListener('dragleave',function(){
            odiv.innerHTML='请把文件拖拽至此区域';
        },false)
        odiv.addEventListener('dragover',function(ev){
            console.log('ondragover')
            ev.preventDefault();
        },false)
        odiv.addEventListener('drop',function(ev){
            console.log(ev.dataTransfer.files)
            let reader=new FileReader();
            reader.onload=function(){
                    alert('成功')
            }
            reader.onerror=function(){
                alert('失败')
            }
            reader.readAsText(ev.dataTransfer.files[0])
            ev.preventDefault();
        },false)
        // odiv.addEventListener('ondragenter',function(){
        //     odiv.innerHTML='释放鼠标';
        //     console.log(1)
        // })
   
  
    }
    </script>
</html>